<div class="flex-column w-100 bg-surface border-rad-6">
  <div class="h-xl lh-xl fx-row-vert-cent flex-between f-600 pl-12 pr-12 p-relative">
    <div>Ledgers</div>
    <div class="tertiary f-400">{{ progress }}</div>
    <div *ngIf="stakingProgress > 0" [style.width.%]="totalProgress"
         class="progress-bar p-absolute">
      <div class="highlight p-absolute" *ngIf="totalProgress < 100"></div>
      <div class="progress p-absolute w-100"></div>
    </div>
  </div>
  <div class="flex-column h-minus-xl primary pl-12 pr-12">
    <div class="group flex-column"
         [ngClass]="ledgers.stakingEpoch.state">
      <div class="fx-row-vert-cent lh-lg h-lg">
        <ng-container *ngTemplateOutlet="icon; context: { state: ledgers.stakingEpoch.state }"></ng-container>
        <span class="group-title pl-5">Staking ledger</span>
        <div [style.margin-left]="'auto'">
          <div class="primary f-600"
               [class.success-primary]="stakingProgress === 100">{{ stakingProgress | number: '1.0-0' }}%
          </div>
        </div>
      </div>
      <ng-container
        *ngTemplateOutlet="snarkedSteps; context: { snarked: ledgers.stakingEpoch.snarked, config: configMap.stakingEpoch }"></ng-container>
    </div>
    <div class="group flex-column"
         [ngClass]="ledgers.nextEpoch.state">
      <div class="fx-row-vert-cent lh-lg h-lg">
        <ng-container *ngTemplateOutlet="icon; context: { state: ledgers.nextEpoch.state }"></ng-container>
        <span class="group-title pl-5">Next epoch ledger</span>
        <div [style.margin-left]="'auto'">
          <div class="primary f-600" [class.success-primary]="nextProgress === 100">
            {{ nextProgress | number: '1.0-0' }}%
          </div>
        </div>
      </div>
      <ng-container
        *ngTemplateOutlet="snarkedSteps; context: { snarked: ledgers.nextEpoch.snarked, config: configMap.nextEpoch }"></ng-container>
    </div>
    <div class="group flex-column"
         [ngClass]="ledgers.rootSnarked.state">
      <div class="fx-row-vert-cent lh-lg h-lg">
        <ng-container *ngTemplateOutlet="icon; context: { state: ledgers.rootSnarked.state }"></ng-container>
        <span class="group-title pl-5">Snarked ledger at the root</span>
        <div [style.margin-left]="'auto'">
          <div class="primary f-600" [class.success-primary]="rootSnarkedProgress === 100">
            {{ rootSnarkedProgress | number: '1.0-0' }}%
          </div>
        </div>
      </div>
      <ng-container
        *ngTemplateOutlet="snarkedSteps; context: { snarked: ledgers.rootSnarked.snarked, config: configMap.rootSnarked }"></ng-container>
    </div>
    <div class="group flex-column"
         [ngClass]="ledgers.rootStaged.state">
      <div class="fx-row-vert-cent lh-lg h-lg">
        <ng-container *ngTemplateOutlet="icon; context: { state: ledgers.rootStaged.state }"></ng-container>
        <span class="group-title pl-5">Staged ledger at the root</span>
        <div [style.margin-left]="'auto'">
          <div class="primary f-600" [class.success-primary]="rootStagedProgress === 100">
            {{ rootStagedProgress | number: '1.0-0' }}%
          </div>
        </div>
      </div>
      <div class="steps flex-column">
        <div class="flex-row flex-between h-lg lh-lg"
             (mouseenter)="show($event, ledgers.rootStaged.staged.fetchPartsStart, ledgers.rootStaged.staged.fetchPartsEnd)"
             (mouseleave)="hide()">
          <div class="step">Fetch parts</div>
          <div>{{ ledgers.rootStaged.staged.fetchPartsDuration ?? ledgers.rootStaged.staged.fetchPassedTime | secDuration: configMap.rootStaged }}</div>
        </div>
        <div class="flex-row flex-between h-lg lh-lg"
             (mouseenter)="show($event, ledgers.rootStaged.staged.reconstructStart, ledgers.rootStaged.staged.reconstructEnd)"
             (mouseleave)="hide()">
          <div class="step">Reconstruct</div>
          <div>{{ ledgers.rootStaged.staged.reconstructDuration ?? ledgers.rootStaged.staged.reconstructPassedTime | secDuration: configMap.rootStaged }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #snarkedSteps let-snarked="snarked" let-config="config">
  <div class="steps flex-column">
    <div class="flex-row flex-between h-lg lh-lg"
         (mouseenter)="show($event, snarked.fetchHashesStart, snarked.fetchHashesEnd)"
         (mouseleave)="hide()">
      <div class="step">Fetch hashes</div>
      <div>{{ snarked.fetchHashesDuration ?? snarked.fetchHashesPassedTime | secDuration: config }}</div>
    </div>
    <div class="flex-row flex-between h-lg lh-lg"
         (mouseenter)="show($event, snarked.fetchAccountsStart, snarked.fetchAccountsEnd)"
         (mouseleave)="hide()">
      <div class="step">Fetch accounts</div>
      <div>{{ snarked.fetchAccountsDuration ?? snarked.fetchAccountsPassedTime | secDuration: config }}</div>
    </div>
  </div>
</ng-template>

<ng-template #icon let-state="state">
  <ng-container [ngSwitch]="state">
    <ng-container *ngSwitchCase="'pending'">
      <span class="pending-icon fx-col-full-cent">
        <span></span>
      </span>
    </ng-container>
    <ng-container *ngSwitchCase="'loading'">
      <span class="loading-icon mina-icon icon-200 primary">progress_activity</span>
    </ng-container>
    <ng-container *ngSwitchCase="'success'">
      <span class="pending-icon fx-col-full-cent success">
        <span></span>
      </span>
    </ng-container>
  </ng-container>
</ng-template>

<ng-template #tooltipRef let-start="start" let-end="end">
  <div class="bg-surface-top popup-box-shadow-weak border pl-10 pr-10 pt-5 pb-5 border-rad-6">
    <div class="tooltip-row tertiary lh-sm h-sm">
      Start:
      <span class="primary">{{ start | readableDate }}</span>
    </div>
    <div class="tooltip-row tertiary lh-sm h-sm">
      End:
      <span class="primary">{{ end | readableDate }}</span>
    </div>
  </div>
</ng-template>
